<template>
  <div>
    <div class="list-area">
      <div class="setting-area glo-content-area">
        <div class="title">{{$t('navigationLeft.warningMessage')}}</div>
      </div>

      <div class="glo-search-area">

        <div class="date-filter widget-item">
          <div class="widget-label">{{$t('BodyTemperatureIndex.BodyTemAnimalTimeS')}}</div>
          <DatePicker
            class="date-widget"
            v-model="selectDate"
            type="daterange"
            :editable='false'
            :placeholder="$t('UlogI18n.UlogI18nTimeScope')"
          />
        </div>
        <div class="widget-item">
          <div class="widget-label">{{$t('warningMessage.warningType')}}</div>
          <Select
            v-model="warningType"
            style="width:200px"
            clearable
          >
            <Option
              v-for="(item, idx) in warningTypes" :key="idx"
              :value="item.value"
            >{{ item.name }}</Option>
          </Select>
        </div>

        <div class="widget-item glo-clear-after">
          <div class="widget-label">{{ $t("devicesIndex.devNumberName") }}：</div>
          <Input
            v-model="sn"
            :placeholder="$t('devicesIndex.devNumberHint')"
            search
            :enter-button="$t('devicesIndex.devNumberBtn')"
            @on-search="$_page_update"
          />
        </div>
      </div>

      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
        @on-selection-change="handleSelection"
      />
      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        show-sizer
        :current="page"
        show-total
        @on-change="$_page_pageChange"
        @on-page-size-change="$_page_pageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import {
  mapState,
} from 'vuex'
import {
  getList,
} from '@/api/warningMessage.js'
import {
  getExcel,
} from '@/api/public.js'
import {
  format
} from '@/utils/auth.js'
import pageMixin from '@/utils/mixins/pageMixin.js'


export default {
  mixins: [
    pageMixin,
  ],

  data () {
    return {
      personName: '',
      sn: '',
      areaName: '',
      selectDate: ["",""],
      warningType: '',
      warningTypes: [
        { name: this.$t('warningMessage.warningType1'), value: 'FC' },
        { name: this.$t('warningMessage.warningType2'), value: 'WX' },
        { name: this.$t('warningMessage.warningType3'), value: 'QY' },
      ],
      personAccount: '',
      // personAccounts: [
      //   { name: '超级管理员', value: '1' },
      // ],
      selection: [],
      list: [],
      columns: [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        
        {
          title: this.$t('devicesIndex.devTableserial'),
          key: 'sn',
        },
        {
          title: this.$t('warningMessage.warningType'),
          key: 'alarmType',
          render: (h, { row }) => {
            let label = '-'
            if (row.alarmType=="FC") {
              label = this.$t('warningMessage.warningType1')
            }else if (row.alarmType=="WX") {
              label = this.$t('warningMessage.warningType2')
            }
            if (row.alarmType=="QY") {
              label = this.$t('warningMessage.warningType3')
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('warningMessage.context'),
          key: 'context',
        },
        {
          title: this.$t('UlogI18n.UlogI18nTime'),
          key: 'createDate',
        },
      ],

      ifCreate: false,
      ifUpdate: false,
      editItem: null,
      ifSelectArea: false,
      areaSelectCallback: null,
    }
  },
  computed: {
    ...mapState([
      'departId',
    ]),
    
    btnShow () {
      return this.$store.state.btnShow
    },
  },
  watch: {
    warningType: '$_page_update',
    selectDate: '$_page_update',
    btnShow () {
      
      this.personTypes = [
        { name: this.$t('navigationLeft.equipment'), value: 'Device' },
        { name: this.$t('navigationLeft.staff'), value: 'Personnel' },
        { name: this.$t('navigationLeft.area'), value: 'Authorization' },
        { name: this.$t('Attendance.AttendanceManage'), value: 'Attendance Management' },
        { name: this.$t('navigationLeft.visitors'), value: 'Visitor Management' },
        { name: this.$t('navigationLeft.permissions'), value: 'Permissions' },
        // { name: this.$t('navigationLeft.bodyTemperature'), value: '测温记录' },
        // { name: this.$t('navigationLeft.accessRecord'), value: '访问记录' },
        // { name: this.$t('navigationLeft.TerminalVersion'), value: '终端版本号管理' },
      ]

      this.columns = [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        
        {
          title: this.$t('devicesIndex.devTableserial'),
          key: 'sn',
        },
        {
          title: this.$t('warningMessage.warningType'),
          key: 'alarmType',
          render: (h, { row }) => {
            let label = '-'
            if (row.alarmType=="FC") {
              label = this.$t('warningMessage.warningType1')
            }else if (row.alarmType=="WX") {
              label = this.$t('warningMessage.warningType2')
            }
            if (row.alarmType=="QY") {
              label = this.$t('warningMessage.warningType3')
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('warningMessage.context'),
          key: 'context',
        },
        {
          title: this.$t('UlogI18n.UlogI18nTime'),
          key: 'createDate',
        },
      ]

      return this.$store.state.btnShow
    }
  },

  mounted () {
    this.$_page_update()
  },

  methods: {
    handleSelection (selection = []) {
      this.selection = selection
    },
    handleSelectionAllStatus (status) {
      this.$refs.table.selectAll(status)
    },

    handleSettingsClick (name, row) {
      switch (name) {
        case 'edit':
          this.showUpdate(row)
          break
      }
    },
    async getData (query) {
      // console.log(this.selectDate)
      let aTime = ''
      let oTime = ''
      if (this.selectDate[0]) {
        aTime = format(this.selectDate[0], 'yyyy-MM-dd HH:mm')
        oTime = format(this.selectDate[1], 'yyyy-MM-dd HH:mm')
      } else {
        // console.log('lalallala')
      }
      const { success, data } = await getList({
        page: query.page,
        limit: query.pageSize,
        sn: this.sn,
        alarmType: this.warningType,
        startDate: aTime,
        endDate: oTime,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {
        list = data.data
        page = data.pageNum || 1
        total = Number(data.count)
      }
      this.list = list
      this.page = page
      this.pageSize = query.pageSize
      this.total = total
      this.selection = []
    },
  },
}
</script>

<style lang="less" scoped>
.list-area {
  overflow: hidden;

  /deep/ .img-area {
    width: 100px;
    height: 100px;
    margin: 6px 0;
    box-sizing: content-box;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 18px;
    font-weight: bold;
  }
}
.glo-search-area {
  .date-filter {
    .date-widget {
      width: 210px;
    }
  }
}
</style>
